<extend name="common/base" />

<block name="resource">
    <link href="__ASSET__/Home/v4/src/css/explore.css" rel="stylesheet">
    <link href="__ASSET__/Home/v4/src/css/home.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
      @font-face{
            font-family: myFirstFont;
            src: url('__ASSET__/Home/v4/src/fonts/icomoon.ttf?d849nxf');
      }
      .icon-close,.icon-right,.icon-left{
          font-family: myFirstFont;
      }
      .other-event-rec-news{
          width:290px;
       }
       .other-event-rec-news .hot-video-li{
          width:290px;
          overflow:hidden;
          position:relative;
       }
       .other-event-rec-news .hot-video-li .video_play{
           position:absolute;
           z-index:100;
           left:0;
           top:0;
           width:100%; 
       }
       .other-event-rec-news .hot-video-li .hot-video a{
          display:block;
       }
       .other-event-rec-news .hot-video-li .item-play{
           overflow:hidden;
          width:290px;
          height:164px;
          vertical-align: middle;
           text-align: center;
          display: table-cell;
       }
       .other-event-rec-news .hot-video-li .item-play img{
            width: auto;
            height: auto;
            margin: auto;
            position: static;
            max-width: 100%;
            max-height: 100%;
       }
      .detail-content img{
          cursor:pointer;
      }
     /*弹出背景**/
      .mask {
        background: none repeat scroll 0 0 #000;
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        opacity: 0.7;
        filter: alpha(opacity=70);
        z-index: 10001;
        cursor:pointer;
      }
      .bigimgcof {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 10002;
        display:none;
      }
      .bigimgcof .switch {
        position: absolute;
        width: 80px;
        height: 80px;
        background-color: #2b333b;
        border-radius: 50%;
        cursor: pointer;
        top: 50%;
        margin-top: -40px;
        text-align: center;
        line-height: 80px;
        font-size: 32px;
        color: #fff;
      }
      .bigimgcof .switch:hover {
        background-color: #4d555d;
      }
      .bigimgcof .next {
        right: 20px;
      }
      .bigimgcof .prev {
        left: 20px;
      }
      .bigimgcof .close_upLyr {
        cursor: pointer;
        height: 30px;
        position: absolute;
        width: 30px;
        z-index: 99;
        right: 40px;
        top: 40px;
        font-weight: 600;
        font-size: 26px;
        color: #88929C;
      }
      .bigimg {
        border: 5px solid #fff;
        position: fixed;
        top: 50%;
        left: 50%;
        width: 500px;
        height: 500px;
        margin-left: -250px;
        margin-top: -250px;
        z-index: 10002;
        background: #ffffff url('http://static.mukewang.com/static/img/course/loading.gif') no-repeat center;
        display: none;
        transition: all 0.3s ease 0s;
      }
      .icon-right:before {
       content: "\e625";
      }
      .icon-left:before {
          content: "\e623";
     }
     .icon-close:before {
       content: "\e621";
     }
    </style>
</block>
<block name="content">
    <div class="new-bg paddingtb20 match-desc-video">
        <div class="container paddingtb20">
            <!--热门比赛-->
            <div class="match-main-left white-bg left">
                <div class="main-right-box">
                    <h1 class="font12 colorthree">
                        <p class="h1-left left">当前位置：
                            <if condition="$news['type'] eq 0">
                                <a href="/news" class="colorthree">
                                    新闻列表
                            <else />
                                <a href="/notice" class="colorthree">
                                    公告列表
                            </if>
                            </a> &gt; {$title}
                        </p>
                    </h1>
                    <!--详情-->
                    <div class="match-smellcon detail-content" >
                        <h1 class="font24 colorthree">{$news.title}</h1>
                        <time class="font14 colorsix"><em>发布人：{$news.author}</em><em>发表于：{$news.create_time|date="Y-m-d",###}</em><em>浏览量：{$news.read}</em></time>
                        <div class="match-smellcondes paddingtb20">
                            <volist name="news.content" id="content">
                                <switch name="content.type">
                                    <case value="text">
                                        <if condition="$content['data']['bold'] == 1">
                                            <div class="match-smellcondes-div colorthree font14 bold">
                                        <else />
                                            <div class="match-smellcondes-div colorthree font14">
                                        </if>
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{$content.data.content}
                                        </div>
                                    </case>
                                    <case value="image">
                                        <div class="match_imgpos match-smellcondes-div">
                                            <img src="{$content.data.url}" />
                                        </div>
                                    </case>
                                    <case value="video">
                                        <div class="match-smellcondes-div match-smellcondes-flash">
                                            <iframe src="{:U('home/VideoPlay/play', ['id' => $content['data']['id']])}" scrolling="no" frameborder="0"></iframe>
                                        </div>
                                    </case>
                                </switch>
                            </volist>
                        </div>
                    </div>  
                </div>
            </div>

            <!--右边-->
            <div class="match-main-right right">
                <!--热门视频-->
                <div class="hotvideo white-bg">      
                    <h1 class="font12 colorthree">
                        <span class="left">热门视频</span>
                    </h1>
                    <ul class="other-event-rec other-event-rec-news">
                        <volist name="videos" id="video">
                            <li class="hot-video-li">
                                <div class="hot-video">
                                    <a href="/video-{$video.id}">
                                        <div class="item-play" data-video="{$video.pre_uri}">
                                            <img src="{$video.thumb|default='__ASSET__/Home/v4/src/images/bg-mr.png'}" alt="{$video.title}" />
                                        </div>
                                        <p class="item-title font13 colorthree">{$video.title}</p>
                                        <div class="item-infos font12">
                                            <span class="author left">
                                                <i class="author-images"></i>
                                                <label class="author-name">{$video.user.nickname}</label>
                                            </span>
                                            <span class="times right">
                                                <i class="times-images"></i>
                                                <em class="times-num" title="播放{$video.statis.play}次">{$video.statis.play}</em>
                                            </span>
                                        </div>
                                    </a>
                                </div>
                            </li>
                        </volist>
                    </ul>
                </div>
                <!--活跃用户-->
                <div class="recommend colorthree white-bg">
                    <h1 class="font12">
                        <span class="left">活跃用户</span>
                    </h1>
                    <ul class="active-users-ul active-users-ul-contain">       
                    </ul>
                </div>
            </div>
        </div>
    </div>
</block>

<block name="component">
    <script src="__ASSET__/Home/v4/dist/js/HDvideo.js"></script>
    <script src="__ASSET__/Home/v4/dist/js/active_user.js?v=1.0"></script>
    <script src="__ASSET__/Home/v4/dist/js/preview_photo.js"></script>
    <script type="text/javascript">
         window._THIS = {
              getUser:"{:U('api/top/user')}",
              other:"/user-",
              unfollow:"{:U('follow/unfollow')}",
              dofollow:"{:U('follow/dofollow')}"
        }
        $(function(){
              var img = new Image();
              img.src = _COMMON.public_url + "/Home/v4/src/images/new_default.jpg";
              $('.new-bg').css({
                    'background':'url('+img.src+') center top no-repeat #000',
                    'backgroundSize': 'contain',
              });
              var  flashwidth = $(".match-smellcondes-flash").width();
              $(".match-smellcondes-flash").height(flashwidth*9/16+20);
              $(".other-event-rec-news .hot-video-li").HDvideo();
        })
    </script>
</block>